<template>
	<view>
		<tpf-waterfall :columnCount="columnCount" :columnGap="columnGap" :leftGap="leftGap" :rightGap="rightGap" @getWaterfallItemWidth="getWaterFallItemWidth">
			<tpf-waterfall-item :ref="'waterfall-item-' + index" v-for="(product, index) of productList" :key="index">
				<tpl-product :style="{'margin-bottom': rowGap}" :size="waterFallItemWidth + 'px'" :type="type" :url="product.url" :image="product.image" :title="product.title" :price="product.price" :coupon="product.coupon" :integral="product.integral" :marketPrice="product.market_price" :priceLabel="product.priceLabel" :discount="product.discount" :sale="product.sale" :btns="btns" :promotionConfig="promotionConfig" @imageLoad="recommendedProductListImageLoad(index)"></tpl-product>
			</tpf-waterfall-item>
		</tpf-waterfall>
	</view>
</template>

<script>
	export default {
		props: {
			type:{
				type:String
			},
			btns:{
				type:Array
			},
			promotionConfig:{
				type:Object,
				default:()=>{
					return {}
				}
			},
			columnCount: {
				type: Number,
				default: 2
			},
			columnGap: {
				type: String
			},
			rowGap: {
				type: String
			},
			leftGap: {
				type: String
			},
			rightGap: {
				type: String
			},
			productList: {
				type: Array,
				default: function () {
					return [
						// {
						// 	image: '',
						// 	title: '',
						// 	price: '',
						// 	priceLabel: '',
						// 	discount: '',
						// }
					]
				}
			}
		},
		data() {
			return {
				waterFallItemWidth: 0,
			}
		},
		methods: {
			getWaterFallItemWidth(e) {
				this.waterFallItemWidth = e;
			},
			recommendedProductListImageLoad(index) {
				setTimeout(() => {
					this.$refs['waterfall-item-' + index][0].calculateLayoutOnce();
				}, 100);
			}
		},
	}
</script>

<style scoped>

</style>